<%@ page language="java" contentType="text/html; charset=utf-8"	pageEncoding="utf-8"%>
<%@ include file="/WEB-INF/component/commonTagLib.jsp"%>
<!DOCTYPE html>
<html>
<head>
<title>物流信息</title>
<%@ include file="/WEB-INF/component/commonCSS.jsp"%>
<!--[if lt IE 9]>
        <script src="lib/js/html5shiv.min.js"></script>
        <script src="lib/js/respond.min.js"></script>
    <![endif]-->
<style type="text/css">
body {
	font-family: "Lucida Grande", Tahoma, Verdana, Lucida, Arial, Helvetica,
		sans-serif, "宋体";
	font-size: 12px;
}
li.tx1,li.tx2{
margin-left:25px;
}

#process {
	margin: 50px;
	padding: 25px 0 80px;
}

#process .node, #process .proce {
	float: left;
	position: relative;
	height: 18px;
	background-image: url(${ctx}/lib/img/bg_state.jpg);
	background-repeat: no-repeat;
}

#process .node.ready {
	width: 13px;
	background-position: -140px 0px;
}

#process .node.doing {
	width: 13px;
	background-position: -140px -60px;
}

#process .node.wait {
	width: 13px;
	background-position: -140px -40px;
}

#process .proce {
	width: 140px;
}

#process .proce.doing {
	background-position: 0 -20px;
	color: #360;
}

#process .proce.wait {
	background-position: 0 -40px;
	color: #360;
}

ul {
	display: inline-block;
	list-style: none;
}

#process ul {
	padding-top: 18px; /*margin-left: -152px;*/
	margin-left: -190px;
	display: inline-block;
	margin-top: 0px;
	position: absolute;
	width: 314px;
	text-align: center;
	list-style: none;
}

#process .proce ul {
	z-index: 5;
	width: 150px;
}

#process .node ul {
	z-index: 1;
	width: 275px;
	margin-left: -125px;
}

#Logistics li {
	padding: 5px 0px;
}

#process .tx2 {
	color: #999;
	line-height: 15px;
	text-align: right;
	
}

#OrderInfo {
	margin: 5px;
	border: 0px;
	width: 95%;
}

#OrderInfo th {
	background-color: #FFFCEB;
	text-align: right;
	width: 120px;
}

#OrderInfo td {
	text-align: left;
}

#processexplain div {
	float: right;
	height: 18px;
	background-image: url(${ctx}/lib/img/bg_state.jpg);
	background-repeat: no-repeat;
	padding-left: 16px;
	margin-right: 20px;
}
/*增加，否则ie6有问题*/
* html #process .node {
	background-position-x: -150px;
}

* html #process .proce {
	background-position-x: 0;
}

* html #process .wait {
	background-position-y: -40px;
}

* html #process .doing {
	background-position-y: -20px;
}

* html #process .ready {
	background-position-y: 0;
}

* html #process .singular {
	background-position-y: -60px;
}
/*ff*/
#process .node ul {
	z-index: 1;
	width: 200px;
	margin-left: -125px;
}
/* ie8+*/
#process .node ul {
	z-index: 1\9;
	width: 200px\9;
	margin-left: -125px\9;
}
/*ie6 7 特殊处理*/
#process .node ul {
	*z-index: 1;
	*width: 200px;
	*margin-left: -90px;
}
/*google*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
	#process .node ul {
		z-index: 1;
		width: 200px;
		margin-left: -125px;
	}
}

/*table*/
table.gridtable {
	font-family: verdana,arial,sans-serif;
	font-size:11px;
	color:#333333;
	border-width: 1px;
	border-color: #666666;
	border-collapse: collapse;
}
table.gridtable th {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #666666;
	background-color: #dedede;
}
table.gridtable td {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #666666;
	background-color: #ffffff;
}
</style>
</head>
<body class="skin-blue-light sidebar-mini fixed skin-blue-light-frame">	
	<section class="content-header">	
	<div class=" box box-success">
           <div class="box-header with-border">
                <h3 class="box-title">物流号：${form.interflowId }</h3>
                <div class="box-tools pull-right">
                </div>
            </div>
            <div class="box-body mchart"  style="margin-top:-30px">
                <div id="process" style="padding-left:100px;">        
				<div id="node1"  class="node ${form.joinStatus }">
					<ul>
						<li class="tx1">制定计划</li>
					</ul>
				</div>
				<div id="proce1" class="proce ${form.joinStatus }"></div>
				<div id="node2" class="node ${form.subStatus }">
					<ul>
						<li class="tx1">提交订单</li>
					</ul>
				</div>
				<div id="proce2" class="proce ${form.subStatus }"></div>
				<div id="node3" class="node ${form.confirmStatus }">
					<ul>
						<li class="tx1">企业确认</li>
					</ul>
				</div>
				<div id="proce3" class="proce ${form.confirmStatus }"></div>
				<div id="node4" class="node ${form.delStatus }">
					<ul>
						<li class="tx1">出库</li>
					</ul>
				</div>
				<div id="proce4" class="proce ${form.delStatus }"></div>
				<div id="node5" class="node ${form.recpStatus }">
					<ul>
						<li class="tx1">收货</li>
					</ul>
				</div>


			</div>
			<div id="processexplain" style="margin-top:-50px">
				<div style="background-position: -140px -37px;">订单未到达节点</div>
				<div style="background-position: -140px -57px">订单当前所处节点</div>
				<div style="background-position: -140px 3px;">订单已通过节点</div>
			</div>
        </div>

     </div>   
        
          
       <div class=" box box-primary">
                <div style="width:100%;height:40px;background-color:#FFFCEB;line-height:40px;padding-left:10px;">
            	订单追踪
            </div>
                
            <div style="width:100%;height:25px;padding-left:50px;">
            	<div style="width:200px;height:25px;float:left;">物流中转时间</div>
                <div style="width:500px;height:25px;float:left;">物流中转描述</div>
                <div style="width:200px;height:25px;float:left;">中转人</div>
            </div>
                <c:forEach items="${rows }" var="list">
                	<div style="width:100%;height:25px;padding-left:50px;" class="waiDiv">
            	<div style="width:200px;float:left;">${list.midDatetime }</div>
                <div style="width:500px;float:left;" class="neiDiv">${list.midDesc }</div>
                <div style="width:200px;float:left;">${list.midUser }</div>
            </div>
                </c:forEach>
                <br/>
                <div style="margin: 8px; padding-left: 10px; color: Red; display: none;">
                                                    上述信息红色字体部分物流信息由配送企业:<span id="CompanyName_PS1"></span>提供，如有疑问请与配送企业或平台联系！</div>
        </div>
         
         <div class="box box-warning">
         		<div style="width:100%;height:40px;background-color:#FFFCEB;line-height:40px;padding-left:10px;">
            	订单信息
            </div>
            	<div style="width:100%;height:25px;">
            		<div style="width:100px;height:25px;float:left;" align="right">收货人信息</div>
            	</div>
            	<div style="width:100%;height:25px;">
            		<div style="width:100px;height:25px;float:left;" align="right">收货人：</div>
            		<div style="width:200px;height:25px;float:left;" ></div>
            	</div>
            	<div style="width:100%;height:25px;">
            		<div style="width:100px;height:25px;float:left;" align="right">地&nbsp;&nbsp;&nbsp;址：</div>
            		<div style="width:1000px;height:25px;float:left;" ></div>
            	</div>
            	<div style="width:100%;height:25px;">
            		<div style="width:100px;height:25px;float:left;" align="right">电&nbsp;&nbsp;&nbsp;话：</div>
            		<div style="width:200px;height:25px;float:left;" ></div>
            	</div>
				<br/>        		
         </div>
         
         
         <div class="box box-warning">
         <div style="width:100%;height:40px;background-color:#FFFCEB;line-height:40px;padding-left:10px;">
            	商品清单
            </div>
			<div style="width:100%;" align="center">
					<table class="gridtable">
					<tr>
						<th>采购价</th><th>采购数量</th><!-- <th>采购金额</th> --><th>配送数量</th><!-- <th>配送金额</th> --><th>药品编码</th><th>通用名</th><th>剂型</th><th>规格</th><th>转换系数</th><th>单位</th><th>材质</th><th>生产企业</th><th>采购限价</th>
					</tr>
					<c:forEach items="${goodsInfo }" var="list">
						<tr>
							<td>${list.pro_price}</td>
							<td>${list.pro_count}</td>
							<!-- <td></td> -->
							<td>${list.del_count}</td>
							<!-- <td></td> -->
							<td>${list.drug_code}</td>
							<td>${list.qualityspec_name}</td>
							<td>${list.form_name}</td>
							<td>${list.spec_name}</td>
							<td>${list.factor}</td>
							<td>${list.unit_name}</td>
							<td>${list.material_name}</td>
							<td>${list.prod_compname}</td>
							<td>${list.pro_price_limit}</td>
						</tr>
					</c:forEach>
					</table>
			</div>
			 <div style="width:100%;height:40px;">
            	
            </div>
     </div> 
	<div style="width:90%;height:40px;line-height:40px;font-size:30px;" align="right">总金额：</div>
	<br/>
</section>
	<%@ include file="/WEB-INF/component/commonJS.jsp"%>
	<script type="text/javascript" src="${ctx }/lib/js/JOrderInfo.js"></script>
	<script type="text/javascript">
			
			$(function(){
				for(var i = 0;i<$(".waiDiv").length;i++){
					$($(".waiDiv")[i]).height($($(".neiDiv")[i]).height());
				}
			});
	</script>
</body>
</html>